<template>
  <section>
    <!--工具条-->


    <!--列表-->
    <template>
      <section class="main-content">


        <section class="main-right">
          <el-col :span="24" class="toolbar">
            <el-form :inline="true" :model="filters">
              <el-form-item>
                <input v-model="filters.name" placeholder="姓名/手机号码" class="input-style"/>

              </el-form-item>
            </el-form>
          </el-col>
          <el-table :data="dataLists" highlight-current-row  style="width: 100%;">
            <el-table-column prop="username" label="姓名" width="100"  sortable>
            </el-table-column>
            <el-table-column prop="mobile" label="用户邮箱" width="120" sortable>
            </el-table-column>
            <el-table-column prop="brandname" label="用户电话" width="120" sortable>
            </el-table-column>
            <el-table-column prop="storenames" label="留言主题" sortable>
            </el-table-column>
            <el-table-column prop="postion" label="详细留言" sortable>
            </el-table-column>


          </el-table>
        </section>
      </section>
    </template>

    <!--分页-->
    <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination>
    </el-col>



  </section>
</template>

<script>
  import util from '../../common/util'
  import NProgress from 'nprogress'
  import req from '../../util/request.js'
  export default {
    data() {
      return {
        filters: {
          name: ''
        },
        userInfo:'',//员工信息输入
        checkDatalist:[],//选择区域列表
        otherUserInfo:[],//第三方员工信息列表
        inputValue:'',
        showTime:false,
        otherState:false,
        flag:false,
        dataLists: [],
        total: 0,
        isShow:false,
        pageSize: 1,
        listLoading: false,
        tonstVisible:false,
        uploadUrl:'',
        addFormVisible:false,//新增界面是否显示
        addFormTtile:'新增',
        addForm:{},
        editFormVisible: false,//编辑界面显是否显示
        editFormTtile: '编辑',//编辑界面标题
        defaultProps: {
          children: 'children',
          label: 'levelname',
          value:'puid'
        },
        //编辑界面数据
        editForm: {
          useruid:'',
          usercode:'',
          mobile:'',
          username:'',
          storenames:'',
          areanames:'',
          parentid:'',
          puid:'',
          levelname:'',
          sex:'',
          cbday:'',
          idcard:'',
          idcardurl1:'',
          idcardurl2:'',
          hiredate:'',
          ecallman:'',
          ecallphone:'',
          healthcerday:'',
          healthcerurl:'',
          luseruid:'',
          lusercode:'',
          lusername:'',
          mtype:'',
          status:0,
          areas:'',
          stores:'',
          fileList:[
          ],
          fileList2:[],
          fileList3:[],
          uploadUrl:'',
          visible2:false,
          visible:false,
          value:''
        },
        editLoading: false,
        value:'',
        btnEditText: '提 交',
        parentData:[],
        paramData:[],
        ruleForm:{},
        checkedBoxList:[]
      }

    },
    created(){
      this.getUsers();
      this.uploadUrl=req.proUrl+'/fileupload/image'
      console.log(this.uploadUrl)
    },
    mounted() {

    },
    methods: {
      //时间转换
      changeHandle(param){
        this.addForm.hiredate=String(param);
        this.editForm.hiredate=String(param)
      },
      changeTimeSet(param){
        this.addForm.cbday=String(param);
        this.editForm.cbday=String(param);
      },
      changeTimeSet2(param){
        this.addForm.healthcerday=String(param);
        this.editForm.healthcerday=String(param);
      },
      toggleSelection(e,rows) {
        var vm=this,arr=[];
        if(e.target.checked){
          arr.push(rows);
          for(var i=0; i<arr.length;i++){
            if(vm.checkedBoxList.indexOf(arr[i])<0){
              vm.checkedBoxList.push(arr[i]);
            }
          }
        }
      },
      //获取第三信息列表
      getInfo(data){
        this.addForm.parentid=data[0];
        this.addForm.puid=data[1];
      },
      getInfo2(data){
        this.editForm.parentid=data[0];
        this.editForm.puid=data[1];
      },
      handleCurrentChange(val) {
        this.pageSize = val;
        this.getUsers();
      },
      //获取用户列表
      getUsers(param,searchValue) {
        let vm=this;
        //联动功能
        req.jQ_ajax({
          type:"get",
          url:'/user',
          data:{
            useruid:'',
            areauid:param?param:'',
            querystr:searchValue?searchValue:'',
            pageIndex:vm.pageSize,
            pageSize:100
          },
          success:function(res){
            //vm.dataLists=vm.dataLists.concat(data.items);
            vm.dataLists=res.items;
            console.log(vm.dataLists)
          },
          error:function(data){

          }
        })

      },
      //删除
      handleDel: function (row) {
        //console.log(row);
        let _this = this;
        this.$confirm('确认删除该记录吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          _this.listLoading = true;
          NProgress.start();
          let para = { useruid: row.useruid };
          console.log(row.useruid)
          //删除对应区域
          req.jQ_ajax({
            type:"delete",
            url:'/user/'+row.useruid,
            data:para,
            success:function () {
              _this.$message({
                message: '删除成功',
                type: 'success'
              });
              _this.getUsers();
            },
            error:function () {

            }
          })

        }).catch(() => {

        });
      },
      //显示编辑界面
      handleEdit: function (row) {
        let _this=this;
        //获取员工信息详情
        req.jQ_ajax({
          type:'get',
          url:'/user/'+row.useruid,
          success:function (res) {
            _this.editForm=Object.assign(_this.editForm,res.content);
            _this.editFormVisible = true;
          }
        });
        _this.getParentInfo(row.useruid)

      },
      //上传照片
      uploadIdSuccess(file){
        this.addForm.idcardurl1=file.items[0].filepath;
        this.editForm.idcardurl1=file.items[0].filepath
      },
      uploadIdSuccess2(file){
        this.addForm.idcardurl2=file.items[0].filepath;
        this.editForm.idcardurl2=file.items[0].filepath
      },
      uploadHealthSuccess(file){
        this.addForm.healthcerurl=file.items[0].filepath;
        this.editForm.healthcerurl=file.items[0].filepath
      },
      //获取岗位及岗位等级信息
      getParentInfo(param){
        let vm=this;
        req.jQ_ajax({
          type:"get",
          url:'/postion',
          data:{
            useruid:param
          },
          success:function(data){
            vm.parentData=data.jsonTreeStr
            //console.log(data.jsonTreeStr)
          },
          error:function(data){
            //console.log(JSON.stringify(data))
          }
        })
      },
      //新增
      addSubmit: function () {
        var _this = this;
        _this.$refs.addForm.validate((valid) => {
          if (valid) {
            _this.$confirm('确认提交吗？', '提示', {}).then(() => {
              _this.editLoading = true;
              NProgress.start();
              _this.btnEditText = '提交中';
              if(_this.addForm.puid==3){
                _this.addForm.mtype=1
              }else if(_this.addForm.puid==1 || _this.addForm.puid==2){
                _this.addForm.mtype=2
              }
              //新增
              req.jQ_ajax({
                type:'post',
                url:'/user',
                data:_this.addForm,
                success:function(res){
                  _this.addFormVisible=false;
                  _this.editLoading=false;
                  _this.addForm.healthcerday='';
                  _this.addForm.cbday='';
                  _this.getUsers();
                },
                error:function(res){
                  console.log(res)
                }
              })
            });
          }
        });
      },
      //提交编辑页面数据
      editSubmit(){
        let _this = this;
        _this.$refs.editForm.validate((valid) => {
          if (valid) {
            _this.$confirm('确认提交吗？', '提示', {}).then(() => {
              _this.editLoading = true;
              NProgress.start();
              _this.btnEditText = '提交中';
              if(_this.editForm.puid==3){
                _this.editForm.mtype=1
              }else if(_this.editForm.puid==1 || _this.editForm.puid==2){
                _this.editForm.mtype=2
              }
              _this.editForm.areas=JSON.stringify(_this.editForm.areas)
              _this.editForm.stores=JSON.stringify(_this.editForm.stores)
              //编辑页面数据
              req.jQ_ajax({
                type:'put',
                url:'/user/'+_this.editForm.useruid,
                data:_this.editForm,
                success:function(res){
                  _this.editFormVisible = false;
                  _this.editLoading = false;
                  _this.getUsers();
                },
                error:function (res) {
                  console.log(res)
                }
              })
            });
          }
        });
      },
      //显示新增界面
      handleAdd: function () {
        var _this = this;
        _this.addFormVisible = true;
        _this.addForm={
          useruid:'',
          usercode:'',
          mobile:'',
          username:'',
          storenames:'',
          areanames:'',
          parentid:'',
          puid:'',
          levelname:'',
          sex:'',
          cbday:'',
          idcard:'',
          idcardurl1:'',
          idcardurl2:'',
          hiredate:'',
          ecallman:'',
          ecallphone:'',
          healthcerday:'',
          healthcerurl:'',
          luseruid:'',
          lusercode:'',
          lusername:'',
          mtype:'',
          status:0,
          areas:'',
          stores:'',
          fileList:[
          ],
          fileList2:[],
          fileList3:[],
          uploadUrl:'',
          visible2:false,
          visible:false,
          value:''
        };
        _this.getParentInfo('')
      },
      handleClose(done) {
        this.addFormVisible=false;
        this.editFormVisible=false

      },
      //搜索
      searchUser(){
        let inputValue,_this=this;
        inputValue=_this.filters.name;
        _this.getUsers('',inputValue)
      },
      //区域选择
      chooseArea(){
        //弹出框 选择区域
        let _this=this;
        if(_this.showTime){
          _this.showTime=false
        }else{
          _this.showTime=true;
        }
      },
      //区域查询
      checkArea(param){
        let _this=this,checkUrl;
        if(param==1){
          if(_this.addForm.parentid== 3) {
            checkUrl = '/area'
          }else if(_this.addForm.parentid !== 3){
            checkUrl='/store';
          }else if(!_this.addForm.parentid){
            _this.$message('请选择岗位')
            return
          }
        }else{
          if(_this.editForm.parentid== 3) {
            checkUrl = '/area'
          }else if(_this.editForm.parentid !== 3){
            checkUrl='/store';
          }else if(!_this.editForm.parentid){
            _this.$message('请选择岗位')
            return
          }
        }
        req.jQ_ajax({
          type:"get",
          url:checkUrl,
          data:{
            querystr:_this.inputValue?_this.inputValue:''
          },
          success:function(res){
            _this.dataTree=res.jsonTreeStr;
            _this.checkDatalist=res.items
          },
          error:function(res){
            console.log(JSON.stringify(res))
          }
        })
      },
      //确认所选区域(1,新增时所选区域 2,修改是所选区域 )
      confirmChoose(typeChoose){
        let _this=this;
        if(typeChoose==1){
          if(_this.addForm.parentid==3){
            _this.addForm.areas=JSON.stringify(_this.checkedBoxList)
            for(let i=0;i<_this.checkedBoxList.length;i++){
              _this.addForm.areanames+=(_this.checkedBoxList[i].areaname+",")
            }
          }else{
            _this.addForm.stores=JSON.stringify(_this.checkedBoxList)
            for(let i=0;i<_this.checkedBoxList.length;i++){
              _this.addForm.storenames+=(_this.checkedBoxList[i].storename+",");
            }
          }
        }else if(typeChoose== 2){
          if(_this.editForm.parentid==3){
            _this.editForm.areas=JSON.stringify(_this.checkedBoxList);
            for(let i=0;i<_this.checkedBoxList.length;i++){
              _this.editForm.areanames+=(_this.checkedBoxList[i].areaname+",")
            }
          }else{
            _this.editForm.stores=JSON.stringify(_this.checkedBoxList)
            for(let i=0;i<_this.checkedBoxList.length;i++){
              _this.editForm.storenames+=(_this.checkedBoxList[i].storename+",")
            }
          }
        }
        _this.checkedBoxList=[];
        _this.showTime=false;
      },
      //取消选择
      cancelChoose(){
        let _this=this;
        _this.showTime=false;
        _this.otherState=false
      },
      //第三方选择
      chooseOtherInfo(){
        let _this=this;
        if(_this.otherState){
          _this.otherState=false
        }else{
          _this.otherState=true;
        }
      },
      //获取第三方查询信息列表
      checkOtherInfo(){
        let _this=this;
        req.jQ_ajax({
          type:"get",
          url:'/user/relation',
          data:{
            querystr:_this.userInfo?_this.userInfo:'',
            pageIndex:'',
            pageSize:''
          },
          success:function(res){
            _this.otherUserInfo=res.items
          },
          error:function(res){
            console.log(JSON.stringify(res))
          }
        })
      },
      //确认选择第三方信息
      confirmOtherUser(param){
        let _this=this;
        if(_this.checkedBoxList.length==0){
          _this.$message('请先查询/选中')
          return
        }
        //console.log(_this.checkedBoxList)
        if(param==1){
          _this.addForm.lusername=_this.checkedBoxList[0].lusername;
          _this.addForm.lusercode=_this.checkedBoxList[0].lusercode;
          _this.addForm.luseruid=_this.checkedBoxList[0].luseruid;
          _this.addForm.lmobile=_this.checkedBoxList[0].lmobile;
          //console.log(_this.addForm.lusername)
          _this.checkedBoxList=[]
        }else{
          _this.editForm.lusername=_this.checkedBoxList[0].lusername;
          _this.editForm.lusercode=_this.checkedBoxList[0].lusercode;
          _this.editForm.luseruid=_this.checkedBoxList[0].luseruid;
          _this.editForm.lmobile=_this.checkedBoxList[0].lmobile;
          _this.checkedBoxList=[]
        }
        _this.otherState=false
      }
    },
    components:{
      //ElInput
    }

  }
</script>

<style scoped>
  ul{
    list-style:none;

  }
  .el-input, .el-input__inner {
    width:50%;
    display: inline-block;
  }
  .main-content{
    display:-webkit-box;
    padding:10px;
  }
  .main-left{
    width:260px;
    margin-right:10px;
  }
  .main-right{
    -webkit-box-flex:1;
  }
  .input-style{
    width:200px;
    height:30px;
    padding-left:6px;
    line-height:30px;
    border-radius:3px;
    border:#d1d1d1 1px solid;
  }
  .select-style{

    width:150px;
    height:32px;
    line-height:32px;
    border-radius:3px;
    border:#d1d1d1 1px solid;
  }
  .el-form-item{
    margin-bottom:10px;
  }
  .form-list-pare{
    display:-webkit-box;
    list-style:none;
    margin:0;
    padding:0;
  }
  .form-list-pare li{
    width:50%;
  }
  .file-upload{
    position:relative;
    width:200px;

  }
  .file-upload .el-button{
    position:absolute;
    z-index:1;
  }
  .file-upload input[type='file']{
    position:absolute;
    z-index:2;
    opacity:0;
  }
  .file-list{
    display:-webkit-box;
  }
  .file-list li{
    width:100px;
  }

</style>
